<template>
<div>
    <breadcrumb :breadItem1="breadItem1" :breadItem2="breadItem2" :breadItem3="breadItem3"></breadcrumb>
    <br>
    <div class="shadowed-box">
      <h4>调佣单信息 </h4>
      <table class="pure-table pure-table-bordered mt5">
          <colgroup>
              <col width="10%">
              <col width="20%">
              <col width="10%">
              <col width="20%">
              <col width="10%">
              <col width="30%">
          </colgroup>
          <thead>
          </thead>
          <tbody>
              <tr>
                  <td>调佣单ID:</td>
                  <td>{{id}}</td>
                  <td>类型:</td>
                  <td>{{commissionTypeStr}}</td>
                  <td>状态:</td>
                  <td>{{statusStr}}</td>
              </tr>
              <tr>
                  <td>渠道:</td>
                  <td>{{sourceStr}}</td>
                  <td>提交人:</td>
                  <td>{{creatorInfo}}</td>
                  <td>创建时间:</td>
                  <td>{{createTime}}</td>
              </tr>
              <tr>
                  <td>订单编号:</td>
                  <td><a class="link" :href="toOrderDetail" id="orderLink" target="_Blank">{{orderCode}}</a></td>
                  <td>项目名称:</td>
                  <td>{{projectName}}</td>
                  <td>客户信息:</td>
                  <td>{{userInfo}}</td>
              </tr>
              <tr>
                  <td>应收佣金:</td>
                  <td>{{twoPreciseCommissionBefore}}</td>
                  <td>实际应收:</td>
                  <td>{{twoPreciseCommissionAfter}}</td>
                  <td><span style="color:red">调整金额:</span></td>
                  <td>{{twoPreciseCommissionChange}}</td>
              </tr>
              <tr>
                <td rowspan="3">凭证:</td>
                  <td><proofComponent v-for="(proof,index) in proofs" :proof="proof" :index="index"></proofComponent></td>
                  <td rowspan="3">备注:</td>
                  <td colspan="3">{{memo}}<td>
              </tr>
          </tbody>

      </table>

      <h4>操作记录</h4>
      <el-table :data="logList" border style="width: 100%">
          <el-table-column prop="roleTypeStr" label="岗位" width="180">
          </el-table-column>
          <el-table-column prop="creatorInfo" label="操作人" width="180">
          </el-table-column>
          <el-table-column prop="operatorTypeStr" label="操作">
          </el-table-column>
          <el-table-column prop="createTime" label="时间">
          </el-table-column>
          <el-table-column prop="memo" label="备注">
          </el-table-column>
      </el-table>
    </div>

</div>
</template>

<script>
import breadcrumb from '../../Breadcrumb.vue'
import proofComponent from './proofComponent.vue'
export default {
    data() {
        return {
            breadItem1: '调佣单管理',
            breadItem2: '调佣单详情',
            breadItem3: '',
            id: '',
            commissionTypeStr: '',
            statusStr: '',
            sourceStr: '',
            creatorInfo: '',
            createTime: '',
            orderId: '',
            orderCode: '',
            projectName: '',
            userInfo: '',
            twoPreciseCommissionBefore: '',
            twoPreciseCommissionAfter: '',
            twoPreciseCommissionChange: '',
            proofs: [],
            logList: [],
            memo: '',
            toOrderDetail: ''
        }
    },
    created: function() {
        let _this = this;
        let url = basePath + 'commission/detailVue' + '?id=' + this.$route.params.changeId;
        $.ajax({
            type: 'get',
            url: url,
            success: function(data) {
                console.log(data);
                if (data.errorCode != 0) {
                    showMsg(data.message);
                }
                let commissionBasicInfo = data.commissionBasicInfo;
                _this.breadItem3 = commissionBasicInfo.cityName;
                _this.id = commissionBasicInfo.id;
                _this.commissionTypeStr = commissionBasicInfo.commissionTypeStr;
                _this.statusStr = commissionBasicInfo.statusStr;
                _this.sourceStr = commissionBasicInfo.sourceStr;
                _this.creatorInfo = commissionBasicInfo.creatorInfo;
                _this.createTime = commissionBasicInfo.createTime;
                _this.orderId = commissionBasicInfo.orderId;
                _this.orderCode = commissionBasicInfo.orderCode;
                _this.projectName = commissionBasicInfo.projectName;
                _this.userInfo = commissionBasicInfo.userInfo;
                _this.twoPreciseCommissionBefore = commissionBasicInfo.twoPreciseCommissionBefore;
                _this.twoPreciseCommissionAfter = commissionBasicInfo.twoPreciseCommissionAfter;
                _this.twoPreciseCommissionChange = commissionBasicInfo.twoPreciseCommissionChange;
                _this.proofs = data.imageLists;
                _this.logList = data.logLists;
                _this.ifShowOrderDetail = data.ifShowOrderDetail;
                _this.toOrderDetail = _this.ifShowOrderDetail ? basePath + 'order/detail/' + commissionBasicInfo.orderId : '#';
                _this.memo = commissionBasicInfo.memo;
            },
            error: function() {
                showMsg(serverError);
            }
        });
    },
    components: {
        'breadcrumb': breadcrumb,
        'proofComponent': proofComponent
    }
}
</script>

<style>

</style>
